<template>
  <div class="w-screen h-screen flex-center">
    <div style="  " class="login uni-shadow">
      <UserLogin @update:body="(x) => (loginRequestBody = x)" @click-login="handleClickLogin"></UserLogin>
      <!-- {{ loginRequestBody }} -->

    </div>
  </div>
</template>

<script lang="ts" setup>
const loginRequestBody = ref({
  username: "",
  password: "",
});

const handleClickLogin = () => {
  navigateTo('/user/mangement',)
};
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block(login) {
  width: 35vw;
  min-width: 500px;
  height: 400px;
}
</style>
